<template>
  <div class="center~ w-full h-35px border border-gray-200 rounded">
    <div class="text-xs border-r-1 border-gray-200 p-5px box-border">{{ prefix }}</div>
    <input class="flex-1 border-none rounded p-5px box-border"
           :class="[inputBg, color]"
           v-model="value"
           :placeholder="placeholder"/>
  </div>
</template>

<script setup lang="ts">
interface Props {
  prefix: string
  value: string
  placeholder?: string
  inputBg?: string
  color?: string
}

const rawProps = withDefaults(defineProps<Props>(), {
  inputBg: "bg-light-50",
  color: 'text-dark-50'
})
const {prefix, value, inputBg, placeholder} = toRefs(rawProps)
</script>

<style scoped>
input {
  outline: none;
}

input::placeholder {
  font-size: 12px;
  color: var(--gray);
}
</style>